<template>

	<el-input v-model="userid" :disabled="isdisabled" placeholder="输入账号" />
	<el-input v-model="password" :disabled="isdisabled" placeholder="输入密码" />
	<el-button type="primary" :disabled="isdisabled" @click="Login">登录</el-button>
	<div>
		<ul>
			<li v-for="user in LoginUser">{{user}}用户登录</li>
		</ul>
	</div>
	<el-input v-model="sendUserid" :disabled="!isdisabled" placeholder="发送给某人" />
	<el-input v-model="sendContent" :disabled="!isdisabled" placeholder="发送内容" />
	<el-button type="primary" :disabled="!isdisabled" @click="SendAll">发送所有人</el-button>
	<el-button type="primary" :disabled="!isdisabled" @click="SendUser">发送到个人</el-button>
	<div>
		<ul>
			<li v-for="user in msgContent">{{user}}</li>
		</ul>
	</div>
	<!-- <input type="text" v-model="state.userMessage" v-on:keypress="txtMsgOnkeypress" />
	<div>
		<ul>
			<li v-for="(msg,index) in state.messages" :key="index">{{msg}}</li>
		</ul>
	</div>
	<el-button type="primary">发送</el-button>
	<el-button type="success">Success</el-button>
	<el-button type="info">Info</el-button>
	<el-button type="warning">Warning</el-button>
	<el-button type="danger">Danger</el-button> -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		reactive,
		onMounted
	} from 'vue'
	import * as signalR from '@microsoft/signalr'

	defineProps({
		msg: String
	})

	var connection
	const LoginUser = ref([])

	const msgContent = reactive([])

	const isdisabled = ref(false)
	const userid = ref('')
	const password = ref('')
	const sendUserid = ref('')
	const sendContent = ref('')

	const Login = async () => {
		connection = new signalR.HubConnectionBuilder()
			.withUrl('http://127.0.0.1:5196/api/chat') //这里一定要写指定的ip，否则报错，大坑搞了1天的时间
			.withAutomaticReconnect().build();
		await connection.start();

		connection.on('dicUsers', msg => { //监听用户登录的信息，前后端要一致
			console.log(msg)
			LoginUser.value = msg
			console.log(LoginUser.value)
		});

		connection.on('ReceivePublicMessageLogin', (Loginmsg) => { //监听登录的信息，前后端要一致
			console.log(Loginmsg)
			msgContent.push(Loginmsg)
			console.log(msgContent.value)
			console.log('aaa')
		});
		connection.on('ReceivePublicMessage', (user, msg) => { //监听发送的信息，前后端要一致
			console.log(user)
			console.log(msg)
			msgContent.push(user + "说：" + msg)
			console.log(msgContent.value)
			console.log('bbb')
		});

		connection.on('ChatInfo', msg => { //监听单独发送的信息，前后端要一致
			console.log("单独说：" + msg)
			msgContent.push("单独说：" + msg)
			console.log("单独说：" + msgContent.value)
			console.log('ccc')
		});

		await connection.invoke("Login", userid.value); //发送消息
		// connection.on('ReceivePublicMessage', msg => {
		// 	state.messages.push(msg); //监听发送的信息，前后端要一致
		// });
		isdisabled.value = true
		console.log('wewew')
	}
	const SendAll = async () => {
		console.log(userid.value)
		console.log(sendContent.value)
		await connection.invoke("SendPublicMessage", userid.value, sendContent.value); //发送消息
		console.log('zxzx')
	}

	const SendUser = async () => {
		console.log(sendContent.value)
		await connection.invoke("ChatOne", userid.value, sendUserid.value, sendContent.value); //发送消息
		console.log('55fff')
	}

	// onMounted(async function() {
	// 	connection = new signalR.HubConnectionBuilder()
	// 		.withUrl(' http://127.0.0.1:5196/api/chat') //这里一定要写指定的ip，否则报错，大坑搞了1天的时间
	// 		.withAutomaticReconnect().build();
	// 	await connection.start();
	// 	connection.on('ReceivePublicMessage', msg => {
	// 		state.messages.push(msg);
	// 	});
	// });
</script>

<style scoped>
	a {
		color: #42b983;
	}
</style>
